<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>日志管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__CSS__/oksub.css">
    <script type="text/javascript" src="__LIB__/loading/okLoading.js"></script>
</head>
<body>
<div class="ok-body">
    <!--模糊搜索区域-->
    <form class="layui-form ok-search-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="action" placeholder="操作" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="url" placeholder="链接" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select name="method">
                        <option value="" selected>请选择请求方式</option>
                        <option value="GET">GET</option>
                        <option value="POST">POST</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" name="ip" placeholder="IP地址" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select id="staff" name="staff_id">
                        <option value="" selected>请选择操作人</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="search">
                        <i class="layui-icon">&#xe615;</i>
                    </button>
                </div>
            </div>
        </div>
    </form>
    <!--数据表格-->
    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="__LIB__/layui/layui.js"></script>
<script>
    layui.use(["jquery", "table", "form", "okLayer", "okUtils"], function () {
        let $ = layui.jquery;
        let table = layui.table;
        let form = layui.form;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        okLoading.close($);
        
        let dataTable = table.render({
            elem: '#tableId',
            url: "{:url('Log/getTableData')}",
            limit: 15,
            limits: [10, 15, 20, 30, 50],
            page: true,
            toolbar: "#toolbarTpl",
            size: "sm",
            cols: [[
                {field: "id", title: "ID", width: 60},
                {field: "module", title: "业务模块", width: 160},
                {field: "action", title: "行为", width: 220},
                {field: "url", title: "链接", width: 240},
                {field: "method", title: "请求方式", width: 120},
                {field: "staff", title: "操作人", width: 160, templet: "#staffTpl"},
                {field: "ip", title: "IP地址", width: 160},
                {field: "create_time", title: "记录时间", width: 200},
            ]],
            done: function (res, curr, count) {
                // console.info(res, curr, count);
            }
        });

        okUtils.ajax("{:url('Staff/getValidStaff')}").done(function (response) {
            $.each(response.data, function(index, item) {
                $('#staff').append(new Option(item.name, item.id));
            });
            form.render('select');
        }).fail(function (error) {
            // console.log(error)
        });

        form.on("submit(search)", function (data) {
            dataTable.reload({
                where: data.field,
                page: {curr: 1}
            });
            return false;
        });

        table.on("toolbar(tableFilter)", function (obj) {
            switch (obj.event) {
                case "batchDel":
                    batchDel();
                    break;
            }
        });

        function batchDel() {
            okLayer.confirm("确定要清空吗？", function (index) {
                okUtils.ajax("{:url('clear')}", "post", {}, true).done(function (response) {
                    okUtils.tableSuccessMsg(response.msg);
                }).fail(function (error) {
                    // console.log(error)
                });
            });
        }

    })
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
    {if has_permission($flag.clear)}
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">清空日志</button>
    </div>
    {/if}
</script>
<!-- 操作人模板 -->
<script type="text/html" id="staffTpl">
    <span>[ID: {{d.staff_id}}] {{d.staff.name}}</span>
</script>
</body>
</html>
